<template>
    <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="功能介绍" name="first">
            <div class="demo-collapse">
                <el-collapse v-model="activeCollapse" accordion>
                    <el-collapse-item v-for="item in pros.featureData" :name="item.id" :title="item.title" :key="item.id">
                        <p v-html="item.content">
                        </p>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </el-tab-pane>
        <el-tab-pane label="作者" name="second">
            <div class="author">
                <el-avatar :size="50" :src="userdata.photo" />
                <div class="detail">
                    <p>{{ userdata.username }}</p>
                    <p>一名即将面临中年危机的程序员~~~</p>
                </div>
            </div>
            <p>什么看起来高端就用什么,不要管实用不实用。例如对C++:switch统统重构成多态;如果有指针,统统改成智能的;C++一定要自己写 template;数字是全部要替换成宏的名字能起多长就起多长;struct就不要出现了,如果出现,也一定要用__attriburte__修饰一 下;运算都是位操作的;操作符都是重载的;网络都是并发缓冲线程池的;int只用int32_t声明的;继承不用普通的,什么多继承虚继承 啊;helloworld也要写捕获异常的;后人一看代码,中间一堆关键字 extern,asm,auto,XXXXX_cast,volatile,explicit,register,template,让一般总在敲 int,if,else,for的小程序员顿时心生崇拜。</p>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import { ref, defineProps,onMounted,watchEffect } from 'vue'
import { Getdata } from '@/hooks/getUserData'
const activeName = ref('first')
const activeCollapse = ref(1)
const pros = defineProps(['featureData'])

const { userdata } = Getdata()


</script>

<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
    font-weight: bold;
}

.el-collapse-item {
    :deep(a) {
        color: blue;
        margin: 0 4px;
    }
}
.author{
    display: flex;
}
p{
    text-indent: 2em;
    font-size: 12px;
}
.detail p:first-child{
    font-weight: 800;
    font-size: 25px;
}
</style>